<script setup lang='ts'>
import { ref } from 'vue';
import Child from './14_父子通信中的子组件.vue'

const userName = ref("张三")//声明响应数据
const userAge = ref(18)
const changeInfo = () => {
    userName.value = "李四"
    userAge.value++
}
// 父组件定义函数 接受子组件传过来的函数
const receiveFunc = (count: number) => {
    userAge.value = count
}
const receiveAge = (age: number) => {
    userAge.value = age
}
const receiveName = (getName: string) => {
    userName.value = getName
}
const receiveAll = (getName: string, getAge: number) => {
    userAge.value = getAge,
        userName.value = getName
}
</script>

<template>
    <div class="parent">
        <h1>当前的父组件</h1>
        <p>姓名：{{ userName }}</p>
        <p>年龄：{{ userAge }}</p>
        <button @click="changeInfo">修改数据</button>
        <Child :name="userName" :age="userAge" :func="receiveFunc" @update-age="receiveAge" @update-name="receiveName"
            @update-all="receiveAll">
        </Child>

    </div>
</template>

<style scoped></style>